<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.4.6 (461470)"/><meta name="altitude" content="6.562146186828613"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2020-10-25 15:33:54 +0000"/><meta name="latitude" content="31.37547302246094"/><meta name="longitude" content="121.493602266096"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-11-02 18:30:04 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>day12：状态管理器</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000; margin-top: 14px;">一、个人中心 + 设置</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/uploader" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">文件上传组件</a> 更新头像信息，并保存到数据库</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">更新个人信息，点击提交时，同步更新到数据库</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">退出登录功能，删除登录产生的本地存储数据</p>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">二、状态管理器的使用</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><a href="https://vuex.vuejs.org/zh/" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">什么是Vuex</a>？</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">什么是状态管理模式</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">这个状态自管理应用包含以下几个部分：</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">state，驱动应用的数据源；</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">view，以声明方式将 state 映射到视图；</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">actions，响应在 view 上的用户输入导致的状态变化。</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">什么时候使用</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">多个视图依赖同一个状态
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">不同视图获取购物车数量</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">来自不同视图的行为需要变更同一个状态
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">不同视图可以修改购物车数量</li>
</ul>
</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">使用方式：</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">分模块 √</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">不分模块</li>
</ul>
</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">分模块，每个模块内需要包含：</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">state：初始化的数据</p>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">actions：执行的异步操作</p>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">mutations：唯一改变数据的方式</p>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">namespaced：命名空间</p>
</li>
</ul>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">三、分模块创建状态管理器</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">store/modules/user.js模块的结构</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 初始化的数据</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> state = {
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">loginState</span>: localStorage.getItem(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'isLogin'</span>) || <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">''</span>,
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">userId</span>: localStorage.getItem(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'userId'</span>) || <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">''</span>,
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">token</span>: localStorage.getItem(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'token'</span>) || <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">''</span>
}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 执行的异步操作</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> actions = {}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 唯一改变数据的方式</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> mutations = {
  change_loginState (state, payload) {
    state.loginState = payload
  },
  change_userId (state, payload) {
    state.userId = payload
  },
  change_token (state, payload) {
    state.token = payload
  }
}

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">default</span> {
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">namespaced</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>, <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 改变mutations，可以直接使用user/change_loginState</span>
  state,
  actions,
  mutations
}

</code></pre>
<ol start="2" style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">store/index.js引入模块的结构</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> Vue <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'vue'</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> Vuex <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'vuex'</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> user <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./modules/user.js'</span>

Vue.use(Vuex)

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">default</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vuex.Store({
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">state</span>: {
  },
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">mutations</span>: {
  },
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">actions</span>: {
  },
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">modules</span>: {
    user
  }
})
</code></pre>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">四、组件中使用Vuex</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">登录页面，登录成功之后改变Vuex的状态
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件内提交mutations，使用<code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.$store.commit()</code></li>
</ul>
</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 登录成功之后，修改状态管理器的状态</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.$store.commit(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'user/change_loginState'</span>, <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'ok'</span>)
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.$store.commit(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'user/change_token'</span>, res.data.token)
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.$store.commit(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'user/change_userId'</span>, res.data.id)
</code></pre>
<ol start="2" style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">详情页，使用状态管理器中的状态，读取</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 状态管理器.状态.模块.属性</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.$store.state.user.loginState === <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'ok'</span>

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.$store.state.user.userId
</code></pre>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">五、mapState辅助函数的使用</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">主要用来获取状态，需要配合计算属性实现
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件中提前引入Vuex的辅助函数
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">import { mapState } from 'vuex'</code></li>
</ul>
</li>
</ul>
</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 固定写法，利用解构赋值，获取state中的loginState，userId</span>
{
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">computed</span>: {
        ...mapState({
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">loginState</span>: <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">state</span> =&gt;</span> state.user.loginState,
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">userId</span>: <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">state</span> =&gt;</span> state.user.userId
        })
    }
}
</code></pre>
<ol start="2" style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">可以直接使用 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.loginState</code> 或 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.userId</code> 找到对应状态</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">注意：<a href="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">组件的导航守卫中无法使用this找到实例</a></p>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">六、mapMutations辅助函数的使用</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">组件中提交mutations的简化写法，需要配合methods实现
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件中提前引入Vuex的辅助函数
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">import { mapMutations } from 'vuex'</code></li>
</ul>
</li>
</ul>
</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">{
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">methods</span>: {
        ...mapMutations({
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">change_loginState</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'user/change_loginState'</span>,
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">change_userId</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'user/change_userId'</span>,
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">change_token</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'user/change_token'</span>
        })
    }
}
</code></pre>
<ol start="2" style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">可以替换掉commit系列方法</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// this.$store.commit('user/change_loginState', 'ok')</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// this.$store.commit('user/change_token', res.data.token)</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// this.$store.commit('user/change_userId', res.data.id)</span>

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.change_loginState(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'ok'</span>)
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.change_token(res.data.token)
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.change_userId(res.data.id)
</code></pre>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">七、购物车数量计算</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">创建购物车的状态管理器</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 初始化的数据</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> state = {
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">cartList</span>: []
}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 执行的异步操作</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> actions = {}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 唯一改变数据的方式</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> mutations = {
  change_cartList (state, payload) {
    state.cartList = payload
  }
}

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">default</span> {
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">namespaced</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,
  state,
  actions,
  mutations
}

</code></pre>
<ol start="2" style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">store/index.js引入模块的结构</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> Vue <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'vue'</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> Vuex <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'vuex'</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> user <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./modules/user.js'</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> cart <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./modules/cart.js'</span>

Vue.use(Vuex)

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">default</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vuex.Store({
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">modules</span>: {
    user,
    cart
  },
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">getters</span>: { <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// vuex的计算属性</span>
    sum (state) {
      <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> state.cart.cartList.reduce(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">prev, next</span>) =&gt;</span> {
        <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> next.flag ? prev + next.num : prev + <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>
      }, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>)
    }
  }
})

</code></pre>
<ol start="3" style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">购物车页面中，引入 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">mapMutations</code> 辅助函数</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">import { mapMutations } from 'vuex'</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">methods中合并辅助函数返回的方法</p>
</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">methods: {
    ...mapMutations({
      <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">change_cartList</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'cart/change_cartList'</span>
    })
}
</code></pre>
<ol start="5" style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">所有数据发生改变的位置，都要更新状态管理器中的数据</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.change_cartList(this.cartList)</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">包括footer组件，商品详情页，凡是会引起购物车变化的位置，都要对应更新状态管理器中的状态</p>
</li>
</ol>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%23%20%E4%B8%80%E3%80%81%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83%20%2B%20%E8%AE%BE%E7%BD%AE%0A1.%20%E4%BD%BF%E7%94%A8%20%5B%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fuploader)%20%E6%9B%B4%E6%96%B0%E5%A4%B4%E5%83%8F%E4%BF%A1%E6%81%AF%EF%BC%8C%E5%B9%B6%E4%BF%9D%E5%AD%98%E5%88%B0%E6%95%B0%E6%8D%AE%E5%BA%93%0A%0A2.%20%E6%9B%B4%E6%96%B0%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%EF%BC%8C%E7%82%B9%E5%87%BB%E6%8F%90%E4%BA%A4%E6%97%B6%EF%BC%8C%E5%90%8C%E6%AD%A5%E6%9B%B4%E6%96%B0%E5%88%B0%E6%95%B0%E6%8D%AE%E5%BA%93%0A%0A3.%20%E9%80%80%E5%87%BA%E7%99%BB%E5%BD%95%E5%8A%9F%E8%83%BD%EF%BC%8C%E5%88%A0%E9%99%A4%E7%99%BB%E5%BD%95%E4%BA%A7%E7%94%9F%E7%9A%84%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E6%95%B0%E6%8D%AE%0A%0A%0A%23%20%E4%BA%8C%E3%80%81%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%99%A8%E7%9A%84%E4%BD%BF%E7%94%A8%0A1.%20%5B%E4%BB%80%E4%B9%88%E6%98%AFVuex%5D(https%3A%2F%2Fvuex.vuejs.org%2Fzh%2F)%EF%BC%9F%0A%20%20%20%20-%20Vuex%20%E6%98%AF%E4%B8%80%E4%B8%AA%E4%B8%93%E4%B8%BA%20Vue.js%20%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91%E7%9A%84%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%A8%A1%E5%BC%8F%E3%80%82%0A%20%20%20%20-%20%E5%AE%83%E9%87%87%E7%94%A8%E9%9B%86%E4%B8%AD%E5%BC%8F%E5%AD%98%E5%82%A8%E7%AE%A1%E7%90%86%E5%BA%94%E7%94%A8%E7%9A%84%E6%89%80%E6%9C%89%E7%BB%84%E4%BB%B6%E7%9A%84%E7%8A%B6%E6%80%81%EF%BC%8C%E5%B9%B6%E4%BB%A5%E7%9B%B8%E5%BA%94%E7%9A%84%E8%A7%84%E5%88%99%E4%BF%9D%E8%AF%81%E7%8A%B6%E6%80%81%E4%BB%A5%E4%B8%80%E7%A7%8D%E5%8F%AF%E9%A2%84%E6%B5%8B%E7%9A%84%E6%96%B9%E5%BC%8F%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E3%80%82%0A%0A2.%20%E4%BB%80%E4%B9%88%E6%98%AF%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%A8%A1%E5%BC%8F%0A%20%20%20%20-%20%E8%BF%99%E4%B8%AA%E7%8A%B6%E6%80%81%E8%87%AA%E7%AE%A1%E7%90%86%E5%BA%94%E7%94%A8%E5%8C%85%E5%90%AB%E4%BB%A5%E4%B8%8B%E5%87%A0%E4%B8%AA%E9%83%A8%E5%88%86%EF%BC%9A%0A%20%20%20%20%20%20%20%20-%20state%EF%BC%8C%E9%A9%B1%E5%8A%A8%E5%BA%94%E7%94%A8%E7%9A%84%E6%95%B0%E6%8D%AE%E6%BA%90%EF%BC%9B%0A%20%20%20%20%20%20%20%20-%20view%EF%BC%8C%E4%BB%A5%E5%A3%B0%E6%98%8E%E6%96%B9%E5%BC%8F%E5%B0%86%20state%20%E6%98%A0%E5%B0%84%E5%88%B0%E8%A7%86%E5%9B%BE%EF%BC%9B%0A%20%20%20%20%20%20%20%20-%20actions%EF%BC%8C%E5%93%8D%E5%BA%94%E5%9C%A8%20view%20%E4%B8%8A%E7%9A%84%E7%94%A8%E6%88%B7%E8%BE%93%E5%85%A5%E5%AF%BC%E8%87%B4%E7%9A%84%E7%8A%B6%E6%80%81%E5%8F%98%E5%8C%96%E3%80%82%0A%20%20%20%20-%20%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E4%BD%BF%E7%94%A8%0A%20%20%20%20%20%20%20%20-%20%E5%A4%9A%E4%B8%AA%E8%A7%86%E5%9B%BE%E4%BE%9D%E8%B5%96%E5%90%8C%E4%B8%80%E4%B8%AA%E7%8A%B6%E6%80%81%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20%E4%B8%8D%E5%90%8C%E8%A7%86%E5%9B%BE%E8%8E%B7%E5%8F%96%E8%B4%AD%E7%89%A9%E8%BD%A6%E6%95%B0%E9%87%8F%0A%20%20%20%20%20%20%20%20-%20%E6%9D%A5%E8%87%AA%E4%B8%8D%E5%90%8C%E8%A7%86%E5%9B%BE%E7%9A%84%E8%A1%8C%E4%B8%BA%E9%9C%80%E8%A6%81%E5%8F%98%E6%9B%B4%E5%90%8C%E4%B8%80%E4%B8%AA%E7%8A%B6%E6%80%81%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20%E4%B8%8D%E5%90%8C%E8%A7%86%E5%9B%BE%E5%8F%AF%E4%BB%A5%E4%BF%AE%E6%94%B9%E8%B4%AD%E7%89%A9%E8%BD%A6%E6%95%B0%E9%87%8F%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20-%20%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F%EF%BC%9A%0A%20%20%20%20%20%20%20%20-%20%E5%88%86%E6%A8%A1%E5%9D%97%20%E2%88%9A%0A%20%20%20%20%20%20%20%20-%20%E4%B8%8D%E5%88%86%E6%A8%A1%E5%9D%97%0A%0A3.%20%E5%88%86%E6%A8%A1%E5%9D%97%EF%BC%8C%E6%AF%8F%E4%B8%AA%E6%A8%A1%E5%9D%97%E5%86%85%E9%9C%80%E8%A6%81%E5%8C%85%E5%90%AB%EF%BC%9A%0A%20%20%20%20-%20state%EF%BC%9A%E5%88%9D%E5%A7%8B%E5%8C%96%E7%9A%84%E6%95%B0%E6%8D%AE%0A%20%20%20%20-%20actions%EF%BC%9A%E6%89%A7%E8%A1%8C%E7%9A%84%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C%0A%20%20%20%20-%20mutations%EF%BC%9A%E5%94%AF%E4%B8%80%E6%94%B9%E5%8F%98%E6%95%B0%E6%8D%AE%E7%9A%84%E6%96%B9%E5%BC%8F%0A%0A%20%20%20%20-%20namespaced%EF%BC%9A%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4%0A%0A%0A%23%20%E4%B8%89%E3%80%81%E5%88%86%E6%A8%A1%E5%9D%97%E5%88%9B%E5%BB%BA%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%99%A8%0A1.%20store%2Fmodules%2Fuser.js%E6%A8%A1%E5%9D%97%E7%9A%84%E7%BB%93%E6%9E%84%0A%60%60%60js%0A%2F%2F%20%E5%88%9D%E5%A7%8B%E5%8C%96%E7%9A%84%E6%95%B0%E6%8D%AE%0Aconst%20state%20%3D%20%7B%0A%20%20loginState%3A%20localStorage.getItem('isLogin')%20%7C%7C%20''%2C%0A%20%20userId%3A%20localStorage.getItem('userId')%20%7C%7C%20''%2C%0A%20%20token%3A%20localStorage.getItem('token')%20%7C%7C%20''%0A%7D%0A%0A%2F%2F%20%E6%89%A7%E8%A1%8C%E7%9A%84%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C%0Aconst%20actions%20%3D%20%7B%7D%0A%0A%2F%2F%20%E5%94%AF%E4%B8%80%E6%94%B9%E5%8F%98%E6%95%B0%E6%8D%AE%E7%9A%84%E6%96%B9%E5%BC%8F%0Aconst%20mutations%20%3D%20%7B%0A%20%20change_loginState%20(state%2C%20payload)%20%7B%0A%20%20%20%20state.loginState%20%3D%20payload%0A%20%20%7D%2C%0A%20%20change_userId%20(state%2C%20payload)%20%7B%0A%20%20%20%20state.userId%20%3D%20payload%0A%20%20%7D%2C%0A%20%20change_token%20(state%2C%20payload)%20%7B%0A%20%20%20%20state.token%20%3D%20payload%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20%7B%0A%20%20namespaced%3A%20true%2C%20%2F%2F%20%E6%94%B9%E5%8F%98mutations%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8user%2Fchange_loginState%0A%20%20state%2C%0A%20%20actions%2C%0A%20%20mutations%0A%7D%0A%0A%60%60%60%0A2.%20store%2Findex.js%E5%BC%95%E5%85%A5%E6%A8%A1%E5%9D%97%E7%9A%84%E7%BB%93%E6%9E%84%0A%60%60%60js%0Aimport%20Vue%20from%20'vue'%0Aimport%20Vuex%20from%20'vuex'%0Aimport%20user%20from%20'.%2Fmodules%2Fuser.js'%0A%0AVue.use(Vuex)%0A%0Aexport%20default%20new%20Vuex.Store(%7B%0A%20%20state%3A%20%7B%0A%20%20%7D%2C%0A%20%20mutations%3A%20%7B%0A%20%20%7D%2C%0A%20%20actions%3A%20%7B%0A%20%20%7D%2C%0A%20%20modules%3A%20%7B%0A%20%20%20%20user%0A%20%20%7D%0A%7D)%0A%60%60%60%0A%0A%23%20%E5%9B%9B%E3%80%81%E7%BB%84%E4%BB%B6%E4%B8%AD%E4%BD%BF%E7%94%A8Vuex%0A1.%20%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2%EF%BC%8C%E7%99%BB%E5%BD%95%E6%88%90%E5%8A%9F%E4%B9%8B%E5%90%8E%E6%94%B9%E5%8F%98Vuex%E7%9A%84%E7%8A%B6%E6%80%81%0A%20%20%20%20-%20%E7%BB%84%E4%BB%B6%E5%86%85%E6%8F%90%E4%BA%A4mutations%EF%BC%8C%E4%BD%BF%E7%94%A8%60this.%24store.commit()%60%0A%60%60%60js%0A%2F%2F%20%E7%99%BB%E5%BD%95%E6%88%90%E5%8A%9F%E4%B9%8B%E5%90%8E%EF%BC%8C%E4%BF%AE%E6%94%B9%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%99%A8%E7%9A%84%E7%8A%B6%E6%80%81%0Athis.%24store.commit('user%2Fchange_loginState'%2C%20'ok')%0Athis.%24store.commit('user%2Fchange_token'%2C%20res.data.token)%0Athis.%24store.commit('user%2Fchange_userId'%2C%20res.data.id)%0A%60%60%60%0A%0A2.%20%E8%AF%A6%E6%83%85%E9%A1%B5%EF%BC%8C%E4%BD%BF%E7%94%A8%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%99%A8%E4%B8%AD%E7%9A%84%E7%8A%B6%E6%80%81%EF%BC%8C%E8%AF%BB%E5%8F%96%0A%60%60%60js%0A%2F%2F%20%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%99%A8.%E7%8A%B6%E6%80%81.%E6%A8%A1%E5%9D%97.%E5%B1%9E%E6%80%A7%0Athis.%24store.state.user.loginState%20%3D%3D%3D%20'ok'%0A%0Athis.%24store.state.user.userId%0A%60%60%60%0A%0A%0A%23%20%E4%BA%94%E3%80%81mapState%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0%E7%9A%84%E4%BD%BF%E7%94%A8%0A1.%20%E4%B8%BB%E8%A6%81%E7%94%A8%E6%9D%A5%E8%8E%B7%E5%8F%96%E7%8A%B6%E6%80%81%EF%BC%8C%E9%9C%80%E8%A6%81%E9%85%8D%E5%90%88%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%AE%9E%E7%8E%B0%0A%20%20%20%20-%20%E7%BB%84%E4%BB%B6%E4%B8%AD%E6%8F%90%E5%89%8D%E5%BC%95%E5%85%A5Vuex%E7%9A%84%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0%0A%20%20%20%20%20%20%20%20-%20%60import%20%7B%20mapState%20%7D%20from%20'vuex'%60%0A%60%60%60js%0A%2F%2F%20%E5%9B%BA%E5%AE%9A%E5%86%99%E6%B3%95%EF%BC%8C%E5%88%A9%E7%94%A8%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%EF%BC%8C%E8%8E%B7%E5%8F%96state%E4%B8%AD%E7%9A%84loginState%EF%BC%8CuserId%0A%7B%0A%20%20%20%20computed%3A%20%7B%0A%20%20%20%20%20%20%20%20...mapState(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20loginState%3A%20state%20%3D%3E%20state.user.loginState%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20userId%3A%20state%20%3D%3E%20state.user.userId%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%7D%0A%7D%0A%60%60%60%0A%0A2.%20%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8%20%60this.loginState%60%20%E6%88%96%20%60this.userId%60%20%E6%89%BE%E5%88%B0%E5%AF%B9%E5%BA%94%E7%8A%B6%E6%80%81%0A%0A3.%20%E6%B3%A8%E6%84%8F%EF%BC%9A%5B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB%E4%B8%AD%E6%97%A0%E6%B3%95%E4%BD%BF%E7%94%A8this%E6%89%BE%E5%88%B0%E5%AE%9E%E4%BE%8B%5D(https%3A%2F%2Frouter.vuejs.org%2Fzh%2Fguide%2Fadvanced%2Fnavigation-guards.html%23%25E7%25BB%2584%25E4%25BB%25B6%25E5%2586%2585%25E7%259A%2584%25E5%25AE%2588%25E5%258D%25AB)%0A%0A%0A%0A%23%20%E5%85%AD%E3%80%81mapMutations%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0%E7%9A%84%E4%BD%BF%E7%94%A8%0A1.%20%E7%BB%84%E4%BB%B6%E4%B8%AD%E6%8F%90%E4%BA%A4mutations%E7%9A%84%E7%AE%80%E5%8C%96%E5%86%99%E6%B3%95%EF%BC%8C%E9%9C%80%E8%A6%81%E9%85%8D%E5%90%88methods%E5%AE%9E%E7%8E%B0%0A%20%20%20%20-%20%E7%BB%84%E4%BB%B6%E4%B8%AD%E6%8F%90%E5%89%8D%E5%BC%95%E5%85%A5Vuex%E7%9A%84%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0%0A%20%20%20%20%20%20%20%20-%20%60import%20%7B%20mapMutations%20%7D%20from%20'vuex'%60%0A%60%60%60js%0A%7B%0A%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20...mapMutations(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20change_loginState%3A%20'user%2Fchange_loginState'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20change_userId%3A%20'user%2Fchange_userId'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20change_token%3A%20'user%2Fchange_token'%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%7D%0A%7D%0A%60%60%60%0A%0A2.%20%E5%8F%AF%E4%BB%A5%E6%9B%BF%E6%8D%A2%E6%8E%89commit%E7%B3%BB%E5%88%97%E6%96%B9%E6%B3%95%0A%60%60%60js%0A%2F%2F%20this.%24store.commit('user%2Fchange_loginState'%2C%20'ok')%0A%2F%2F%20this.%24store.commit('user%2Fchange_token'%2C%20res.data.token)%0A%2F%2F%20this.%24store.commit('user%2Fchange_userId'%2C%20res.data.id)%0A%0Athis.change_loginState('ok')%0Athis.change_token(res.data.token)%0Athis.change_userId(res.data.id)%0A%60%60%60%0A%0A%23%20%E4%B8%83%E3%80%81%E8%B4%AD%E7%89%A9%E8%BD%A6%E6%95%B0%E9%87%8F%E8%AE%A1%E7%AE%97%0A1.%20%E5%88%9B%E5%BB%BA%E8%B4%AD%E7%89%A9%E8%BD%A6%E7%9A%84%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%99%A8%0A%60%60%60js%0A%2F%2F%20%E5%88%9D%E5%A7%8B%E5%8C%96%E7%9A%84%E6%95%B0%E6%8D%AE%0Aconst%20state%20%3D%20%7B%0A%20%20cartList%3A%20%5B%5D%0A%7D%0A%0A%2F%2F%20%E6%89%A7%E8%A1%8C%E7%9A%84%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C%0Aconst%20actions%20%3D%20%7B%7D%0A%0A%2F%2F%20%E5%94%AF%E4%B8%80%E6%94%B9%E5%8F%98%E6%95%B0%E6%8D%AE%E7%9A%84%E6%96%B9%E5%BC%8F%0Aconst%20mutations%20%3D%20%7B%0A%20%20change_cartList%20(state%2C%20payload)%20%7B%0A%20%20%20%20state.cartList%20%3D%20payload%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20%7B%0A%20%20namespaced%3A%20true%2C%0A%20%20state%2C%0A%20%20actions%2C%0A%20%20mutations%0A%7D%0A%0A%60%60%60%0A%0A2.%20store%2Findex.js%E5%BC%95%E5%85%A5%E6%A8%A1%E5%9D%97%E7%9A%84%E7%BB%93%E6%9E%84%0A%60%60%60js%0Aimport%20Vue%20from%20'vue'%0Aimport%20Vuex%20from%20'vuex'%0Aimport%20user%20from%20'.%2Fmodules%2Fuser.js'%0Aimport%20cart%20from%20'.%2Fmodules%2Fcart.js'%0A%0AVue.use(Vuex)%0A%0Aexport%20default%20new%20Vuex.Store(%7B%0A%20%20modules%3A%20%7B%0A%20%20%20%20user%2C%0A%20%20%20%20cart%0A%20%20%7D%2C%0A%20%20getters%3A%20%7B%20%2F%2F%20vuex%E7%9A%84%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%0A%20%20%20%20sum%20(state)%20%7B%0A%20%20%20%20%20%20return%20state.cart.cartList.reduce((prev%2C%20next)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20return%20next.flag%20%3F%20prev%20%2B%20next.num%20%3A%20prev%20%2B%200%0A%20%20%20%20%20%20%7D%2C%200)%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D)%0A%0A%60%60%60%0A%0A3.%20%E8%B4%AD%E7%89%A9%E8%BD%A6%E9%A1%B5%E9%9D%A2%E4%B8%AD%EF%BC%8C%E5%BC%95%E5%85%A5%20%60mapMutations%60%20%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0%0A%20%20%20%20-%20%60import%20%7B%20mapMutations%20%7D%20from%20'vuex'%60%0A%0A4.%20methods%E4%B8%AD%E5%90%88%E5%B9%B6%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0%E8%BF%94%E5%9B%9E%E7%9A%84%E6%96%B9%E6%B3%95%0A%60%60%60js%0Amethods%3A%20%7B%0A%20%20%20%20...mapMutations(%7B%0A%20%20%20%20%20%20change_cartList%3A%20'cart%2Fchange_cartList'%0A%20%20%20%20%7D)%0A%7D%0A%60%60%60%0A%0A5.%20%E6%89%80%E6%9C%89%E6%95%B0%E6%8D%AE%E5%8F%91%E7%94%9F%E6%94%B9%E5%8F%98%E7%9A%84%E4%BD%8D%E7%BD%AE%EF%BC%8C%E9%83%BD%E8%A6%81%E6%9B%B4%E6%96%B0%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%99%A8%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%0A%20%20%20%20-%20%60this.change_cartList(this.cartList)%60%0A%0A6.%20%E5%8C%85%E6%8B%ACfooter%E7%BB%84%E4%BB%B6%EF%BC%8C%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E9%A1%B5%EF%BC%8C%E5%87%A1%E6%98%AF%E4%BC%9A%E5%BC%95%E8%B5%B7%E8%B4%AD%E7%89%A9%E8%BD%A6%E5%8F%98%E5%8C%96%E7%9A%84%E4%BD%8D%E7%BD%AE%EF%BC%8C%E9%83%BD%E8%A6%81%E5%AF%B9%E5%BA%94%E6%9B%B4%E6%96%B0%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%99%A8%E4%B8%AD%E7%9A%84%E7%8A%B6%E6%80%81%0A%0A%0A%0A%0A%0A%0A</center></body></html>